<template>
  <div class="app">
    <div class="movie-header">
      <span
        :class="tabIndex === index ? 'active' : ''"
        @click="handleTabClick(item, index)"
        v-for="(item, index) in movieList"
        :key="item.id"
      >
        {{ item.name }}
      </span>
    </div>
    <div class="movie-content">
      <!-- {{ movieList[tabIndex].children }} -->
      <ul v-for="item in movieList[tabIndex]?.children" :key="item.id">
        <li>{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tabIndex: 0,
      movieList: [],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const tabData = await axios.get('/api/tab')
      console.log(tabData, 'tabData')
      this.movieList = tabData.data.data
    },
    handleTabClick(item, index) {
      this.tabIndex = index
    },
  },
}
</script>

<style lang="scss">
.movie-header {
  display: flex;
  span {
    padding: 5px 10px;
    margin: 5px;
    background: lightcoral;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .active {
    background: red;
    color: gold;
  }
}
</style>
